<script>
import HeaderComponent from '../common/header.vue';
import FooterComponent from '../common/footer.vue';
import $ from 'jquery';
import axios from 'axios';

export default {
    name: "search",
    components : {
    HeaderComponent,
    FooterComponent
    },
    data() {
        return {
            products: [],
        };
    },
    methods: {
        toProduct(productId) {
          this.$router.push('/catalog/product/'+productId);
        }

    },
    created(){
        const productsData = JSON.parse(this.$route.query.products || '[]');
        this.products = productsData;
        console.log(this.products);
    }
} 
</script>

<template>
<!DOCTYPE html>
<html lang="en">
<HeaderComponent/>      <!--导入header-->

    <div id="BackLink">
        <a href="/catalog/main">Return to Main Menu</a>
    </div>
  <div class="center">
    <div class="menu1" v-for="product in products.data" :key="product.productId">
      <a @click="toProduct(product.productId)">{{ product.productId }}
        <img :src="'/src'+product.image" alt="">
        <label>{{ product.description }}</label><br>
        <label>{{ product.categoryId }}</label><br>
        <label></label><br>
        <label>name:</label>
        <label>{{ product.name }}</label><br>
      </a>
    </div>
  </div>


<FooterComponent/>      <!--导入footer-->
</html>
</template>

<style scoped>
  @import "@/assets/css/product.css";
</style>



